/**
* 系统管理 菜单管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <el-row>
      <!-- title -->
      <div class="modt-box">权限管理</div>
      <el-col :span="4"></el-col>
      <el-col :span="6">
        <div class="mod-btnbox">
          <el-button size="small" type="primary">全部展开</el-button>
          <el-button size="small" type="primary">全部压缩</el-button>
        </div>

        <!--        树形控件-->
        <!--        <el-tree :data="treeData" :props="defaultProps" @node-click="nodeclick"></el-tree>-->
        <el-tree
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          highlight-current
          :default-expand-all="isOpen"
          icon-class="el-icon-arrow-right"
          @node-click="nodeclick"
          ref="tree">
        </el-tree>

      </el-col>
      <el-col :span="18">
        <div class="mod-btnbox">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addModule">添加</el-button>
        </div>
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="父级菜单" prop="pid" v-if="isAdd">
            <!--            <el-select size="small" v-model="form.pid" placeholder="请选择" class="selectw">-->
            <!--              <el-option v-for="parm in fmenu" :key="parm.id" :label="parm.title" :value="parm.id"></el-option>-->
            <!--            </el-select>-->
            <div class="block">
              <el-cascader
                v-model="value"
                :options="options"
                :props="{ expandTrigger: 'hover',checkStrictly:true }"


                @change="handleChange"></el-cascader>
            </div>
          </el-form-item>
          <el-form-item label="菜单名称" prop="title" >
            <el-input size="small" v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon" >
            <el-input size="small" v-model="form.icon"></el-input>
          </el-form-item>
          <el-form-item label="Path" prop="path" >
            <el-input size="small" v-model="form.path"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type" >
            <el-radio-group v-model="form.type" size="mini" @change="change">
              <el-radio label="1">菜单</el-radio>
              <el-radio label="2">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="顺序" prop="sort">
            <el-input size="small" v-model="form.sort"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="saveModule('form')">保存</el-button>
            <el-button size="small" type="primary" v-show="showdelete" @click="deleteModule">删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import {
        ModuleList,
        ModuleGet,
        ModuleSave,
        ModuleDelete,
        ModuleSelect
    } from '../../api/userMG'

    export default {
        data() {
            return {
                showdelete: false,
                isAdd: false,
                isOpen: false,

                value: [],
                options: [],
                treeData: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                form: {
                    component: '',
                    name: '',
                    id: '',
                    pid: '',
                    pids: '',
                    type: '1',
                    icon: '',
                    sort: '',
                    title: '',
                    path: ''

                },
                // rules表单验证
                rules: {
                    parentId: [
                        {required: true, message: '请选择父级菜单', trigger: 'blur'}
                    ],
                    moduleName: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'}
                    ],
                    moduleIcon: [
                        {required: true, message: '请输入菜单图标', trigger: 'blur'}
                    ],
                    moduleUrl: [{required: true, message: '请输入URL', trigger: 'blur'}],
                    moduleOrder: [
                        {required: true, message: '请输入菜单顺序', trigger: 'blur'}
                    ]
                },
                fmenu: []
            }
        },
        /**
         * 创建完毕
         */

        created() {
            this.getdata();
            this.getmenu();
        },


        /**
         * 里面的方法只有被调用才会执行
         */
        methods: {
            //redio的改变事件
            change(value) {
                console.log("redio的改变事件");
            },
            // 获取数据
            getdata() {
                ModuleList()
                    .then(res => {
                        this.treeData = res.data;
                        //   {
                        //     id: 7,
                        //     pId: 2,
                        //     name: '一层',
                        //     open: true,
                        //     checked: false
                        //   }
                        // ]
                    })
                    .catch(err => {
                        this.loading = false;
                        this.$message.error('菜单管理列表失败，请稍后再试！')
                    })
            },



            // 添加
            addModule() {
                this.showdelete = false;
                this.isAdd = true;
                this.form.id = '';
                this.form.pid = '';
                this.form.pids = '';
                this.form.type = '1';
                this.form.component = '';
                this.form.icon = '';
                this.form.sort = '';
                this.form.name = '';
                this.form.title = '';
                this.form.path = '';
                //获取级联数据
                ModuleSelect().then(res => {
                    console.log(res.data.data);
                    this.options = res.data.data;
                }).catch(err => {
                    this.loading = false;
                    this.$message.error('菜单列表获取失败，请稍后再试！')
                })
            },
            // 获取父级菜单
            // getmenu(id) {
            //     let parm = {
            //         page: '1',
            //         limit: '10'
            //     };
            //     ModuleList()
            //         .then(res => {
            //             this.fmenu = res.data;
            //         })
            //         .catch(err => {
            //             this.loading = false;
            //             this.$message.error('父级菜单列表获取失败，请稍后再试！')
            //         })
            // },
            // 复选变单选
            handleClick(data, checked, node) {
                if (checked) {
                    this.$refs.tree.setCheckedNodes([]);
                    this.$refs.tree.setCheckedNodes([data]);
                    this.showdelete = true
                } else {
                }
            },
            // 点击节点
            nodeclick(data) {
                this.isAdd = false;
                this.showdelete = true;
                console.log(data);
                ModuleGet(data.id)
                    .then(res => {
                        this.form = res.data.data;
                        this.form.type = res.data.data.type + "";
                        // this.$refs.tree.setCheckedNodes([]);
                        // this.$refs.tree.setCheckedNodes([data])
                    })
                    .catch(err => {
                        this.loading = false;
                        this.$message.error('用户管理获取失败，请稍后再试！')
                    })
            },
            //级联事件
            handleChange(value) {
                console.log(value);
                this.form.pid = value[value.length - 1];
                 var pids = [];

                this.form.pids = pids.lineJoin;
                console.log(this.form.pids );
            },
            // 保存菜单
            saveModule(editData) {
                this.$refs[editData].validate(valid => {
                    if (valid) {
                        ModuleSave(this.form)
                            .then(res => {
                                this.getdata();
                                this.addModule();
                                // this.getmenu();
                                this.$message({
                                    type: 'success',
                                    message: '菜单管理列表保存成功'
                                });


                            })
                            .catch(err => {
                                this.$message.error('菜单管理列表保存失败，请稍后再试！')
                            })
                    } else {
                        return false
                    }
                })
            },
            // 删除菜单
            deleteModule() {
                ModuleDelete(this.form.id)
                    .then(res => {
                        this.getdata();
                        this.addModule();
                        this.$message({
                            type: 'success',
                            message: '菜单管理列表删除成功'
                        });
                    })
                    .catch(err => {
                        this.$message.error('菜单管理列表删除失败，请稍后再试！')
                    })
            }
        }
    }
</script>

<style>
  .user-search {
    margin-top: 20px !important;
  }

  .user-search td {
    margin-top: 20px !important;
  }

  .userRole {
    width: 100%;
  }

  .el-table__expanded-cell {
    padding: 0px !important;
    margin: 0px !important;
  }

  .modt-box {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f0f2f5;
    text-align: center;
    color: #334157;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .mod-btnbox {
    margin-bottom: 20px;
  }

  .treeclass {
    border: 1px solid #f3f3f3;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .selectw {
    width: 100%;
  }
</style>

